div.editor-tools {
  background: #daedf6;
  background: linear-gradient(to bottom, #e7f6fd, #daedf6);
  height: 40px;
  line-height: 30px;
  padding: 5px 5px 0;
  width: 98%;

  a.markup-toolbar-link {
    padding: 0 6px;
  }

  button {
    &:first-child {
      margin-left: 0;
    }
  }

  span.separator {
    border-left: solid 1px #ddd;
    font-size: 24px;
    margin: 0 8px 0 6px;
    position: relative;
    top: 4px;
  }
}

&.html-rtl {
  button {
    &:first-child {
      margin-left: 2px;
      margin-right: 0;
    }
  }

  div.editor-tools {
    span.separator {
      border: none;
      border-right: solid 1px #ddd;
      margin: 0 6px 0 8px;
    }
  }
}

button {
  &.markup-toolbar-button {
    border: 0;
    background: url(../img/markup.png) no-repeat 0 0;
    cursor: pointer;
    height: 34px;
    margin: 0 2px;
    text-indent: -9999px;
    width: 36px;
  }

  &.btn-h2 {
    background-position: -44px 0px;
  }

  &.btn-h3 {
    background-position: -88px 0px;
  }

  &.btn-bold {
    background-position: -132px 0px;
  }

  &.btn-italic {
    background-position: -176px 0px;
  }

  &.btn-media {
    background-position: -220px 0px;
  }

  &.btn-link {
    background-position: -264px 0px;
  }

  &.btn-ol {
    background-position: -308px 0px;
  }

  &.btn-ul {
    background-position: -352px 0px;
  }

  &.btn-quote {
    background-image: url(../img/icon.quote.png);
    background-position: 0 center;
  }
}

/* Modals */

#showfor-modal,
#link-modal,
#media-modal {
  text-align: left;
  width: 480px;

  h2 {
    font-size: 16px;
    margin: 10px 0 0;
  }
}

#showfor-modal {
  label {
    float: left;
    padding: 0 15px 0 0;
  }

  input[type="checkbox"] {
    margin: 0 5px 0 0;
  }
}

section.marky {
  div.submit {
    clear: both;
    padding: 20px 0 0;

    a,
    button {
      margin: 0 15px 0 0;
    }
  }
}

#link-modal {
  width: 600px;

  label {
    clear: both;
    float: left;
    padding: 5px 15px 20px 0;
    text-align: right;
    width: 75px;
   }

  ol {
    float: left;
    padding: 0;
    width: 415px;
  }

  li {
    list-style: none;
    padding: 0 0 10px;

    label {
      float: none;
      padding: 0;
      text-align: left;
      width: auto;
    }
  }

  input[type=text] {
    width: 400px;
  }
}

#media-modal {
  height: 80%;
  left: 50%;
  margin-left: -380px;
  max-height: 510px;
  max-height: calc(100%); /* let it continue to grow in FF4 */
  min-height: 400px;
  min-height: calc(0%); /* let it continue to shrink in FF4 */
  position: fixed;
  top: 7%;
  width: 760px;

  div.placeholder {
    height: 65%;
    height:  calc(~"100% - 225px");
    left: 15px;
    position: absolute;
    top: 135px;
  }

  &.processing {
    div.placeholder {
      background: transparent url(../img/customercare/spinner.gif) no-repeat center center;
    }

    #media-list {
      visibility: hidden;
    }
  }

  #media-list {
    height: 80%;
    height: calc(~"100% - 50px");
    overflow: auto;

    li {
      border: solid 1px #fff;
      cursor: pointer;
      list-style: none;
      display: inline-block;
      height: 120px;
      overflow: hidden;
      padding: 5px;
      text-align: center;
      vertical-align: top;
      width: 120px;

      &:hover {
        background: #f0f0f0;
        border: solid 1px #9ACCF7;
      }

      &.selected {
        background: #DAEDF6;
        border: solid 1px #9ACCF7;
      }

      img {
        max-width: 120px;
        max-height: 120px;
      }
    }
  }

  div.filter {
    border-bottom: 1px solid #9ACCF7;
    border-top: 1px solid #9ACCF7;
    display: block;
    padding: 7px 15px;

    div.type {
      color: #929292;
      float: right;
      margin-top: 0.5em;

      ol {
        float: left;
        list-style-type: none;
        margin: 0;

        li {
          border-left: 2px solid #929292;
          color: rgb(0, 81, 185);
          cursor: pointer;
          float: left;
          font-weight: bold;
          padding: 0 0.5em;

          &.selected {
            color: #565656;
            cursor: default;
          }

          &:first-child {
            border: none;
          }
        }
      }

      span {
        float: left;
      }
    }
  }

  ol.pagination {
    margin: 7px 0;
    padding: 7px 0;
  }

  div.submit {
    bottom: 15px;
    left: 15px;
    position: absolute;
  }

  .submit-button {
    right: 0;
  }

  .searchbox {
    width: 630px;
  }

  .kbox-wrap {
    padding: 10px 25px
  }
}

.html-rtl {
  #showfor-modal,
  #link-modal,
  #media-modal {
    text-align: right;
  }

  #showfor-modal {
    label {
      float: right;
      padding: 0 0 0 15px;
    }

    input[type="checkbox"] {
      margin: 0 0 0 5px;
    }
  }

  section.marky {
    div.submit {
      a,
      button {
        margin: 0 0 0 15px;
      }
    }
  }


  #link-modal {
    label {
      float: right;
      padding: 5px 0 20px 15px;
      text-align: left;
    }

    ol {
      float: right;
    }

    li {
      label {
        text-align: right;
      }
    }
  }

  #media-modal {
    div.placeholder {
      left: auto;
      right: 15px;
    }

    div.type {
      float: left;

      ol {
        float: right;

        li {
          border: none;
          border-right: 2px solid #929292;
          float: right;
        }
      }

      span {
        float: right;
      }

      div.submit {
        left: auto;
        right: 15px;
      }
    }
  }
}
